<script>
varname = location.search.substr(1);
function getcolor(event) {
	var hex = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
	if(event.clientX > 164 || event.clientY > 164) {
		return;
	}
	var hsv = new Object();
	var h = 164;
	var y = event.clientY;
	hsv.h = 360 * event.clientX / 164;
	if (y > h/2) {
		hsv.s = 1.0;
		hsv.v = 2 * (h - y) / h;
	}
	else {
		hsv.v = 1.0;
		hsv.s = y / (h/2);
	}
	var rgb = hsvToRgb(hsv);
	var red   = Math.round(255 * rgb.r);
	var green = Math.round(255 * rgb.g);
	var blue  = Math.round(255 * rgb.b);
	hexstr = '#' + hex[(red - (red % 16)) / 16].toString() + hex[red % 16].toString()
		 + hex[(green - (green % 16)) / 16].toString() + hex[green % 16].toString()
		 + hex[(blue - (blue % 16)) / 16].toString() + hex[blue % 16].toString()
	document.getElementById('box').style.backgroundColor = hexstr;
	document.getElementById('colorhex').value = hexstr;
}

function hsvToRgb(hsv) {
	var rgb = new Object();
	var i, f, p, q, t;

	if(hsv.s == 0) {
		// achromatic (grey)
		rgb.r = rgb.g = rgb.b = hsv.v;
		return rgb;
	}
	hsv.h /= 60;
	i = Math.floor( hsv.h );
	f = hsv.h - i;
	p = hsv.v * ( 1 - hsv.s );
	q = hsv.v * ( 1 - hsv.s * f );
	t = hsv.v * ( 1 - hsv.s * ( 1 - f ) );
	switch( i ) {
		case 0:
			rgb.r = hsv.v;
			rgb.g = t;
			rgb.b = p;
			break;
		case 1:
			rgb.r = q;
			rgb.g = hsv.v;
			rgb.b = p;
			break;
		case 2:
			rgb.r = p;
			rgb.g = hsv.v;
			rgb.b = t;
			break;
		case 3:
			rgb.r = p;
			rgb.g = q;
			rgb.b = hsv.v;
			break;
		case 4:
			rgb.r = t;
			rgb.g = p;
			rgb.b = hsv.v;
			break;
		default:
			rgb.r = hsv.v;
			rgb.g = p;
			rgb.b = q;
			break;
	}
	return rgb;
}

function setvalue(obj) {
	parent.$(varname + '_v').value = obj.value + cvalueimg;
	var sobj = parent.$(varname).style.background;
	var sp = sobj.indexOf(' ');
	var setstyle = '';
	if(sp == -1) {
		if(sobj.substr(0, 1) == '#') {
			setstyle = obj.value;
		}
	} else {
		if(sobj.substr(0, 1) == '#') {
			setstyle = obj.value + ' ' + sobj.substr(sp + 1);
		} else if(sobj.substr(sp + 1, 1) == '#') {
			setstyle = obj.value + ' ' + sobj.substr(0, sp);
		}
	}
	setstyle = setstyle != '' ? setstyle : obj.value;
	parent.$(varname).style.background = setstyle;
	document.getElementById('box').style.background = setstyle;
}
</script>
<style>
body {
	margin: 0px;
	background-color: #FFFFFF;
}
</style>

<body onmousedown="getcolor(event)" scrolling="no">
<table cellspacing="0" cellpadding="0">
<tr><td colspan="2"><img src="color.jpg" style="cursor: crosshair ;width: 164px; height: 164px"></td></tr>
<tr height="20"><td width="20" id="box"></td>
<td width="144">
<input id="colorhex" style="padding: 2px;font: 12px Arial, Tahoma;cursor: pointer;width: 100%;border: 0px" onkeyup="setvalue(this)" onclick="setvalue(this)">
</td></tr>
</table>
<script>
var obj = parent.$(varname + '_v');
var sp = obj.value.indexOf(' ');
var cvalue = '';
var cvalueimg = '';
if(sp == -1) {
	if(obj.value.substr(0, 1) == '#') {
		cvalue = obj.value;
	}
} else {
	if(obj.value.substr(0, 1) == '#') {
		cvalue = obj.value.substr(0, sp);
		cvalueimg = ' ' + obj.value.substr(sp + 1);
	} else if(obj.value.substr(sp + 1, 1) == '#') {
		cvalue = obj.value.substr(sp + 1);
		cvalueimg = ' ' + obj.value.substr(0, sp);
	}
}
document.getElementById('colorhex').value = cvalue;
try {
	document.getElementById('box').style.background = cvalue;
} catch(e) {}
</script>
</body>